import LazyImage from "@/components/base/LazyImage"
import { resolveAssetImage } from "@/utils/common"
import styled from "@emotion/styled"
import { memo } from "react"
import { useEnterGame } from "../hooks/useEnterGame"
import { getAssetsUrlWithHttp } from "@/features/business/HomePage_deprecated/constant"
import { RefGameListItem } from "@/apis/home_page_constant_types"
import { GameCardFavButton } from "./GameCardFavButton"

const Container = styled.div`
    position: relative;
    overflow: hidden;
    height: 152rem;
    width: 100%;
`

const Post = styled.img`
    width: 100%;
    height: 152rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
    object-fit: cover;
    background-color: rgba(0, 0, 0, 0.1);
`

interface CardItemProps extends RefGameListItem {}

export const GameCardItem = memo((props: CardItemProps) => {
    const { handleEnterGame } = useEnterGame()
    const { id = "", img = "", code = "" } = props
    return (
        <Container
            onClick={() => {
                handleEnterGame(code)
            }}
        >
            <LazyImage
                src={getAssetsUrlWithHttp(img)}
                placeholder={"Loading..."}
                width="100%"
                height="152rem"
                styles={{
                    cover: {
                        backgroundColor: "rgba(0, 0, 0, 0.1)",
                        borderRadius: "10rem",
                    },
                }}
                fallback={
                    <Post
                        src={resolveAssetImage("pages/HomePage/img_not_found.webp")}
                        alt=""
                    />
                }
            />
            <GameCardFavButton id={id} />
        </Container>
    )
})
